<template>
  <el-dialog
    :title="!dataForm.id ? '' : '生成二维码'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="桌号" prop="num">
      <el-input v-model="dataForm.num" placeholder="输入选中桌号"></el-input>
    </el-form-item>
    <el-form-item>
      <div id="qrcode" ref="qrcode" style="float: left;"></div>
      <div class="link" v-show="downloadDiv" style="float: right;"><i  style="font-size: 20px;align-self: flex-end;color: #3cd41a;line-height: 100px;" @click="downloadCodeImg">点击下载二维码</i></div>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="dataFormSubmit()">生成二维码</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data () {
      return {
        downloadDiv: false,
        visible: false,
        dataForm: {
          id: 0,
          num: ''
        },
        dataRule: {
          userId: [
            { required: true, message: '用户ID不能为空', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '桌号不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      QRCode
    },
    methods: {
      qrcode () {
        var qrcodes = new QRCode(document.getElementById('qrcode'), {
          width: 100,
          height: 100,
          text: window.SITE_CONFIG.qrCode+'?merchant_id=' + this.dataForm.id + '&num=' + this.dataForm.num +'',
          render: 'canvas',
          background: '#ffffff',
          foreground: '#000000'
        })
        console.log(qrcodes)
      },
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/diancan/shopmerchantinfo/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.userId = data.shopMerchantInfo.userId
                this.dataForm.merchantName = data.shopMerchantInfo.merchantName
              }
            })
          }
        })
      },
      downloadCodeImg () {
        // if (this.dataForm.num !== null) {
        var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
        var a = document.createElement('a')
        var event = new MouseEvent('click')
        a.href = canvasData[0].toDataURL('image/png')
        a.download = this.dataForm.merchantName + '第' + this.dataForm.num + '号桌'
        a.dispatchEvent(event)
        // } else {
        //   this.$confirm(`请输入桌号`, '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   })
        // }
      },
      // 表单提交
      dataFormSubmit () {
        this.downloadDiv = true
        document.getElementById('qrcode').innerHTML = ''
        console.log(this.dataForm.num)
        if (this.dataForm.num > 0) {
          this.qrcode()
        }
      }
    }
  }
</script>
<style>
      .link:hover,
      .server-table i.el-tooltip:hover {
          cursor: pointer;
          color: #409EFF;
      }
</style>
